<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>

    <jsp:include page="/WEB-INF/jsp/include/head.jsp"/>
    <link href="static/plugin/bootstrapTable/css/bootstrap-table-tree-column.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="static/layout/simple-line-icons/simple-line-icons.min.css"/>
    <style>
        .bootstrap-table .table:not(.table-condensed), .bootstrap-table .table:not(.table-condensed) > tbody > tr > th, .bootstrap-table .table:not(.table-condensed) > tfoot > tr > th, .bootstrap-table .table:not(.table-condensed) > thead > tr > td, .bootstrap-table .table:not(.table-condensed) > tbody > tr > td, .bootstrap-table .table:not(.table-condensed) > tfoot > tr > td {
            padding: 8px;
        }

        .table:not(.table-condensed) > tbody > tr > td.treenode {
            padding-top: 0;
            padding-bottom: 0;
            border-bottom: solid #fff 1px;
        }

    </style>
</head>
<body>


<!-- 面包屑导航 -->
<ul class="breadcrumb">
    <li><strong>当前位置： </strong>系统管理</li>
    <li class="active">权限管理</li>
</ul>
<div>

    <i class='icon-user-female'></i> <i class='icon-user-follow'></i> <i class='icon-user-following'></i> <i
        class='icon-user-unfollow'></i> <i class='icon-trophy'></i> <i class='icon-screen-smartphone'></i> <i
        class='icon-screen-desktop'></i> <i class='icon-plane'></i> <i class='icon-notebook'></i> <i
        class='icon-moustache'></i> <i class='icon-mouse'></i> <i class='icon-magnet'></i> <i class='icon-energy'></i>
    <i class='icon-emoticon-smile'></i> <i class='icon-disc'></i> <i class='icon-cursor-move'></i> <i
        class='icon-crop'></i> <i class='icon-credit-card'></i> <i class='icon-chemistry'></i> <i class='icon-user'></i>
    <i class='icon-speedometer'></i> <i class='icon-social-youtube'></i> <i class='icon-social-twitter'></i> <i
        class='icon-social-tumblr'></i> <i class='icon-social-facebook'></i> <i class='icon-social-dropbox'></i> <i
        class='icon-social-dribbble'></i> <i class='icon-shield'></i> <i class='icon-screen-tablet'></i> <i
        class='icon-magic-wand'></i> <i class='icon-hourglass'></i> <i class='icon-graduation'></i> <i
        class='icon-ghost'></i> <i class='icon-game-controller'></i> <i class='icon-fire'></i> <i
        class='icon-eyeglasses'></i> <i class='icon-envelope-open'></i> <i class='icon-envelope-letter'></i> <i
        class='icon-bell'></i> <i class='icon-badge'></i> <i class='icon-anchor'></i> <i class='icon-wallet'></i> <i
        class='icon-vector'></i> <i class='icon-speech'></i> <i class='icon-puzzle'></i> <i class='icon-printer'></i> <i
        class='icon-present'></i> <i class='icon-playlist'></i> <i class='icon-pin'></i> <i class='icon-picture'></i> <i
        class='icon-map'></i> <i class='icon-layers'></i> <i class='icon-handbag'></i> <i class='icon-globe-alt'></i> <i
        class='icon-globe'></i> <i class='icon-frame'></i> <i class='icon-folder-alt'></i> <i class='icon-film'></i> <i
        class='icon-feed'></i> <i class='icon-earphones-alt'></i> <i class='icon-earphones'></i> <i
        class='icon-drop'></i> <i class='icon-drawer'></i> <i class='icon-docs'></i> <i class='icon-directions'></i> <i
        class='icon-direction'></i> <i class='icon-diamond'></i> <i class='icon-cup'></i> <i class='icon-compass'></i>
    <i class='icon-call-out'></i> <i class='icon-call-in'></i> <i class='icon-call-end'></i> <i
        class='icon-calculator'></i> <i class='icon-bubbles'></i> <i class='icon-briefcase'></i> <i
        class='icon-book-open'></i> <i class='icon-basket-loaded'></i> <i class='icon-basket'></i> <i
        class='icon-bag'></i> <i class='icon-action-undo'></i> <i class='icon-action-redo'></i> <i
        class='icon-wrench'></i> <i class='icon-umbrella'></i> <i class='icon-trash'></i> <i class='icon-tag'></i> <i
        class='icon-support'></i> <i class='icon-size-fullscreen'></i> <i class='icon-size-actual'></i> <i
        class='icon-shuffle'></i> <i class='icon-share-alt'></i> <i class='icon-share'></i> <i class='icon-rocket'></i>
    <i class='icon-question'></i> <i class='icon-pie-chart'></i> <i class='icon-pencil'></i> <i class='icon-note'></i>
    <i class='icon-music-tone-alt'></i> <i class='icon-music-tone'></i> <i class='icon-microphone'></i> <i
        class='icon-loop'></i> <i class='icon-logout'></i> <i class='icon-login'></i> <i class='icon-list'></i> <i
        class='icon-like'></i> <i class='icon-home'></i> <i class='icon-grid'></i> <i class='icon-graph'></i> <i
        class='icon-equalizer'></i> <i class='icon-dislike'></i> <i class='icon-cursor'></i> <i
        class='icon-control-start'></i> <i class='icon-control-rewind'></i> <i class='icon-control-play'></i> <i
        class='icon-control-pause'></i> <i class='icon-control-forward'></i> <i class='icon-control-end'></i> <i
        class='icon-calendar'></i> <i class='icon-bulb'></i> <i class='icon-bar-chart'></i> <i
        class='icon-arrow-up'></i> <i class='icon-arrow-right'></i> <i class='icon-arrow-left'></i> <i
        class='icon-arrow-down'></i> <i class='icon-ban'></i> <i class='icon-bubble'></i> <i class='icon-camcorder'></i>
    <i class='icon-camera'></i> <i class='icon-check'></i> <i class='icon-clock'></i> <i class='icon-close'></i> <i
        class='icon-cloud-download'></i> <i class='icon-cloud-upload'></i> <i class='icon-doc'></i> <i
        class='icon-envelope'></i> <i class='icon-eye'></i> <i class='icon-flag'></i> <i class='icon-folder'></i> <i
        class='icon-heart'></i> <i class='icon-info'></i> <i class='icon-key'></i> <i class='icon-link'></i> <i
        class='icon-lock'></i> <i class='icon-lock-open'></i> <i class='icon-magnifier'></i> <i
        class='icon-magnifier-add'></i> <i class='icon-magnifier-remove'></i> <i class='icon-paper-clip'></i> <i
        class='icon-paper-plane'></i> <i class='icon-plus'></i> <i class='icon-pointer'></i> <i class='icon-power'></i>
    <i class='icon-refresh'></i> <i class='icon-reload'></i> <i class='icon-settings'></i> <i class='icon-star'></i> <i
        class='icon-symbol-female'></i> <i class='icon-symbol-male'></i> <i class='icon-target'></i> <i
        class='icon-volume-1'></i> <i class='icon-volume-2'></i> <i class='icon-volume-off'></i> <i
        class='icon-users'></i>
</div>
<div id="toolbar">
    <button id="btn-small-list" style="margin-left: 5px" type="button" class="btn btn-default"><span
            class="glyphicon glyphicon-tasks"></span>
    </button>
    <button id="btn-add-data" type="button" class="btn btn-default"><span
            class="glyphicon glyphicon-plus-sign"></span>&nbsp;添加&nbsp;
    </button>
</div>
<table id="table_data"></table>
<div class="modal fade" id="modal_ajax">
    <div class="modal-dialog  modal-lg ">
        <div class="modal-content ">
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<jsp:include page="/WEB-INF/jsp/include/footer.jsp"/>
<script src="static/plugin/bootstrapTable/js/bootstrap-table.js"></script>
<script src="static/plugin/bootstrapTable/js/bootstrap-table-tree-column.js"></script>

<script>
    var $table = $('#table_data');
    $table.bootstrapTable({
        url: '<%=request.getContextPath()%>/upms/permission/select',
        treeShowField: 'name',
        idField: 'id',
        parentIdField: 'pid',
        striped: true,
        cache: false,
        showRefresh: true,
        searchOnEnterKey: false,
        search: true,
        toolbar: "#toolbar",
        toolbarAlign: 'right',
        pagination: false,
        showColumns: true,
        uniqueId: 'id',
        queryParams: function (params) {
            return params
        },
        columns: [
            {
                field: 'id',
                title: '编号',
                visible: false,
            }, {
                field: 'pid',
                title: '父编号',
                visible: false
            }, {
                field: 'name',
                title: '名称',
                switchable: false,
                events: 'Events',
                width: 200,
                formatter: function (value, row, index) {
                    return '<span class="nameClick">' +row.orders+"、"+ value + '</span>';
                }
            }, {
                field: 'icon',
                title: '图标',
                width: 60,
                formatter: function (value, row, index) {
                    return '<i class="' + value + '"></i>'
                }
            }, {
                field: 'url',
                title: '路径'
            }, {
                field: 'permission',
                title: '权值'
            }, {
                field: 'requestPermission',
                title: '依赖权值',
                formatter: function (value, role, index) {
                    if (value && value.length > 30) {
                        return value.substr(0, 30) + "...";
                    }
                    return value;
                }

            }, {
                field: 'remark',
                title: '备注',
                visible: false
            },
            {
                field: 'type',
                title: '类型',
                formatter: function (value, row, index) {
                    if (value == 0) {
                        return '菜单';
                    } else {
                        return '按钮';
                    }
                }
            }, {
                field: 'live',
                title: '状态',
                formatter: function (value, row, index) {
                    if (value == 0) {
                        return '停用';
                    } else {
                        return '启用';
                    }
                }
            }, {
                title: '操作',
                events: 'Events',
                formatter: function (value, row, index) {

                    return [
                        '<button type="button" class="btn btn-xs btn-default update-data">' +
                        '<span class="glyphicon glyphicon-edit  "></span> 修改' +
                        '</button>'
                    ].join('');
                }
            }
        ]
    });
    window.Events = {
        'click .update-data': function (e, value, row, index) {
            $('#modal_ajax').modal({
                backdrop: 'static',
                keyboard: false,
                show: true,
                remote: 'upms/permission/editDlg?id=' + row.id
            });
        },
        'click .nameClick': function (e, value, row, index) {
            if (row.childrenIds == undefined) {
                row.childrenIds = diGui(row);
            }
            if (row.open == undefined || row.open == true) {
                $.each(row.childrenIds, function (i, v) {
                    $table.bootstrapTable('hideRow', {uniqueId: v});
                });
                row.open = false;
            } else {
                $.each(row._nodes, function (i, v) {
                    $table.bootstrapTable('showRow', {uniqueId: v.id});
                    v.open = false;
                });
                row.open = true;
            }
        }
    };

    function diGui(row) {
        var arr = [];
        for (var i = 0; row._nodes && i < row._nodes.length; i++) {
            arr.push(row._nodes[i].id);
            arr = arr.concat(diGui(row._nodes[i]));
        }
        return arr;
    };

    $("#btn-small-list").click(function () {
       var rows= $table.bootstrapTable('getOptions').data;
        $.each(rows,function(i,v){
            v.open=false;
           if (v.pid!=null){
               $table.bootstrapTable('hideRow', {uniqueId: v.id});
           }
        });
    });
    $("#btn-add-data").click(function () {
        $('#modal_ajax').modal({
            backdrop: 'static',
            keyboard: false,
            show: true,
            remote: 'upms/permission/editDlg'
        });
    });

    $.sysPlugin.clearModalRemoveData("modal_ajax");

</script>


</body>
</html>